<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Tips - dispatchEvent を使いこなそう!! - 独自イベントを定義しよう</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        
        <script>
            
            window.onload = function() {
                
                var eBoxA = document.getElementById("boxA");
                var eBoxB = document.getElementById("boxB");
                
                // 右クリック時にコンテキストメニューが出ないようにする
                var cancelContextMenu = function(e) {
                    e.preventDefault();
                };
                eBoxA.addEventListener("contextmenu", cancelContextMenu, false);
                eBoxB.addEventListener("contextmenu", cancelContextMenu, false);
                
                // right check かどうかをチェックする関数
                var checkRightClick = function(e) {
                    if (e.button & 2) {
                        // rightclick イベントを発行
                        var evt = document.createEvent("MouseEvents");
                        evt.initMouseEvent("rightclick", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                        this.dispatchEvent( evt );
                        // 
                        e.preventDefault();
                    }
                };
                
                // click 時イベントに right click をチェックする関数を登録
                eBoxA.addEventListener("mouseup", checkRightClick, false);
                eBoxB.addEventListener("mouseup", checkRightClick, false);
                
                // right click イベントを登録
                eBoxA.addEventListener("rightclick", function(e) {
                    log("boxA を right click!!");
                }, false);
                eBoxB.addEventListener("rightclick", function() {
                    log("boxB を right click!!");
                }, false);
            };
            
            var log = function(str) {
                console.log(str);
                
                var eConsole = document.getElementById("console");
                eConsole.innerHTML += str;
                eConsole.innerHTML += "\n";
            };
            
        </script>
    </head>
    
    <body>
        <header>
            <h1>JavaScript Tips - dispatchEvent を使いこなそう!! - 独自イベントを定義しよう</h1>
            <p>
                <i>rightclick イベント</i> という 右クリックしたときのみ発行する独自イベントを定義してみました.
            </p>
            <p>
                box を right click したときのみ console に文字が表示されます.
            </p>
        </header>
        
        <section>
            <h2>main</h2>
            <div id="main">
                <div id="boxA" class="box">boxA</div>
                <div id="boxB" class="box">boxB</div>
            </div>
        </section>
        
        <section>
            <h2>Console</h2>
            <pre id="console"></pre>
            <button onclick="document.getElementById('console').innerHTML = '';">Clear</button>
        </section>
        
        <footer>
            <h2>Links</h2>
            <a href="index.html">トップ</a>
        </footer>
    </body>
    
</html>